<script setup lang="ts">
import { useClipboard } from '@vueuse/core'
import detailApi from '@/service/api/detail'
import { useAppsStore } from '@/stores/modules/app'

const emit = defineEmits(['success'])
const useStore = useAppsStore()
const { doUserInfo } = useStore
const { getUserInfo: userInfo } = storeToRefs(useStore)
const state = reactive({
  show: false
})
const info = ref<any>({})
const open = (e: any) => {
  info.value = e
  state.show = true
}

const { copy } = useClipboard()
const copyText = async (text: string) => {
  if (!text) return
  try {
    await copy(text)
  } catch (error) {
    console.error('Failed to copy text:', error)
  }
}

const handOpen = () => {
  if (info.value.netdisk) {
    window.open(info.value.netdisk, '_blank')
  } else {
    msgUtil.$message.error('请联系管理员配置下载链接')
  }
}

const popconfirmVisible = ref(false)

const buyLoading = ref(false)
const showPopconfirm = async () => {
  popconfirmVisible.value = false
  if (buyLoading.value) return
  try {
    buyLoading.value = true
    const { code, msg } = await detailApi.buy(info.value.id)
    if (code !== 0) {
      msgUtil.$message.error(msg)
      return
    }
    msgUtil.$message.success('购买成功')
    doUserInfo()
    emit('success')
    state.show = false
  } finally {
    buyLoading.value = false
  }
}

const hidePopconfirm = () => {
  popconfirmVisible.value = false
}
defineExpose({
  open
})
</script>

<template>
  <n-modal v-model:show="state.show" transform-origin="center">
    <n-spin :show="buyLoading" style="--n-opacity-spinning: 0.95">
      <div class="down-pop">
        <div class="title">
          {{ info.name }}
        </div>
        <div class="user flex">
          <div class="left">
            <img :src="info.avatar" alt="" />
            <span>{{ info.author_name }}</span>
          </div>
          <div class="right">
            <i class="esayIcon esayIcon-yulan"></i>
            <span>{{ info.view }}</span>
          </div>
        </div>
        <div class="enum">
          <div class="cell">
            <div class="label">发布人</div>
            <div class="value">{{ info.releaseName || '--' }}</div>
          </div>
          <div class="cell" @click="copyText(info.extracted_code)">
            <div class="label">提取码</div>
            <div class="value">{{ info.extracted_code || '--' }}</div>
          </div>
          <div class="cell" @click="copyText(info.jiangkuaihe)">
            <div class="label">解压码</div>
            <div class="value">{{ info.jiangkuaihe || '--' }}</div>
          </div>
          <div class="cell">
            <div class="label">文件大小</div>
            <div class="value">{{ info.zipSize }}</div>
          </div>
          <div class="cell">
            <div class="label">资源数量</div>
            <div class="value">
              <span>{{ info.photo_count }}P</span>
              <span v-if="info.video_count > 0" style="margin-left: 5px">
                {{ info.video_count }}V
              </span>
            </div>
          </div>
          <div class="cell">
            <div class="label">已购人数</div>
            <div class="value">{{ info.buy_count }}</div>
          </div>
        </div>
        <div class="price">
          <span>价格:</span>
          <span class="price-text" v-if="info.price">
            {{ info.price }}软妹币
          </span>
          <span v-else>限免</span>
        </div>
        <div class="tool">
          <template v-if="info.buy || info.releaseid === userInfo.id">
            <div class="btn" @click="handOpen">下载</div>
          </template>
          <template v-else-if="buyLoading">
            <div class="btn" @click="handOpen">购买中...</div>
          </template>
          <template v-else>
            <n-popconfirm :show-icon="false" v-model:show="popconfirmVisible">
              <template #trigger>
                <div class="btn">购买</div>
              </template>
              <span style="font-size: 13px">
                确定要花费{{ info.price }}币购买吗?
              </span>
              <template #action>
                <div
                  style="padding: 0 5px; cursor: pointer; font-size: 13px"
                  @click="hidePopconfirm"
                >
                  取消
                </div>
                <div
                  style="
                    padding: 0 5px;
                    cursor: pointer;
                    color: orangered;
                    font-size: 13px;
                  "
                  class="confirm"
                  @click="showPopconfirm"
                >
                  确定
                </div>
              </template>
            </n-popconfirm>
          </template>
        </div>
      </div>
    </n-spin>
  </n-modal>
</template>
<style scoped lang="scss">
.down-pop {
  border-radius: 10px;
  background: #fff;
  width: 320px;
  color: #333;
  padding: 15px;

  .title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .user {
    margin-top: 10px;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #f6f6f6;

    .left {
      display: flex;
      align-content: center;

      img {
        width: 24px;
        height: 24px;
        border-radius: 50%;
      }

      span {
        padding-left: 5px;
        font-size: 13.5px;
      }
    }

    .right {
      i {
        font-size: 13px;
        color: gray;
        padding-right: 2px;
      }

      span {
        font-size: 13px;
        color: #999;
      }
    }
  }

  .enum {
    margin-top: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f6f6f6;

    .cell {
      display: flex;
      align-content: center;
      justify-content: space-between;
      padding: 5px 0;
      font-size: 12px;
    }
  }

  .price {
    padding-top: 10px;
    font-size: 13px;
    color: gray;

    .price-text {
      color: orangered;
      font-size: 15px;
      margin-left: 5px;
    }
  }

  .tool {
    margin-top: 20px;

    .btn {
      width: 100%;
      padding: 10px;
      cursor: pointer;
      background: orangered;
      color: #fff;
      text-align: center;
      border-radius: 10px;

      &:hover {
        color: #fff;
      }
    }
  }
}

@media (max-width: 800px) {
  .down-pop {
    width: 300px;
  }
}
</style>
